<template >
  <div>
    <el-table :data="rolelist" border style="width: 100%">
      <el-table-column prop="id" label="角色编号" width="180">
        <!-- <template #default="scope">{{ scope.row.date }}</template> -->
      </el-table-column>
      <el-table-column prop="rolename" label="角色名称" width="180">
        <!-- <template #default="scope">{{ scope.row.name }}</template> -->
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          <div>
            <el-tag class="ml-2" type="success" v-if="scope.row.status == 1">正常</el-tag>
            <el-tag class="ml-2" type="danger" v-else>禁用</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template #default="scope">
          <div>
            <el-button type="primary" @click="edit(scope.row.id)">编辑</el-button>
            <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>
<script lang="ts" setup>
import { reactive, computed, defineEmits } from 'vue'
import { useStore } from 'vuex'
import {roledelete} from '../../request/api'
import { ElMessage, ElMessageBox } from 'element-plus'

const stores=useStore()
let getrole=()=>{
stores.dispatch("role/getRoleAction")
}
let del=(id:any)=>{


    ElMessageBox.confirm(
    '你确定要删除吗',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
  roledelete({id}).then(res=>{
        if (res.code == 200) {
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
          getrole();
        }

      })

    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
  


let emit = defineEmits(['edit'])
let edit = (id:any) => {
  emit('edit', id)
}
const store = useStore()
const rolelist = computed(() => store.getters["role/getMenu"]);

const getMenu = () => {
  store.dispatch("role/getRoleAction");
};
//组件一加载触发行动
getMenu();
let tableData = reactive([
  {
    date: '1',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]) 
</script>
<style lang="">
    
</style>